@import '../../style/themes/index';
@import './mixin.less';

@tree-prefix-cls: ~'@{kd-prefix}-tree';
@tree-node-prefix-cls: ~'@{kd-prefix}-tree-node';
.@{tree-prefix-cls} {
  position: relative;
  overflow: auto;
  height: inherit;
  display: flex;
  flex-grow: 1;
  font-size: @tree-font-size;
  color: @tree-color-text;
  &-root {
    min-width: 100%;
    flex-shrink: 0;
  }
  &-plantom {
    position: absolute;
    min-width: 100%;
    z-index: -1;
  }
}

.@{tree-node-prefix-cls} {
  &-root {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  &-fb-children-pointerEvents * {
    pointer-events: none;
  }
  &-item {
    height: @tree-node-height;
    display: flex;
    align-items: center;
  }
  &-item-hover {
    transition: background-color @tree-transition-duration, color @tree-transition-duration;
  }
  &-item-hover:hover {
    background-color: @tree-node-hover-bg-color;
    cursor: pointer;
  }

  &-indent {
    display: flex;
    width: 1px;
    border-top: 0;
    border-left: 11px;
    border-bottom: 0;
    border-right: 10px;
    border-color: white;
    border-style: solid;
    height: @tree-node-height;
    cursor: default;
    opacity: 0;
  }
  &-indent-line {
    background-color: black;
    opacity: 1;
  }
  &-icon {
    cursor: pointer;
    height: @tree-expand-icon-height;
    width: @tree-expand-icon-width;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: @tree-node-icon-size;
    color: @tree-node-icon-color-text;
  }
  &-icon-hidden {
    height: @tree-node-icon-height;
    width: @tree-node-icon-width;
    flex-shrink: 0;
    opacity: 0;
    cursor: default;
  }
  &-animation-expand {
    transform: rotate(90deg);
    transition: transform @tree-transition-duration;
  }
  &-animation-collapse {
    transform: rotate(0deg);
    transition: transform @tree-transition-duration;
  }
  &-disabled {
    cursor: not-allowed !important;
    border-color: @tree-node-disabled-border-color;
  }
  &-title-disabled {
    color: @tree-node-disabled-color;
  }
  &-title {
    white-space: nowrap;
    margin-left: 6px;
  }
  &-selected {
    background-color: @tree-node-checked-bg-color !important;
    color: @tree-node-checked-text-color;

    .@{tree-node-prefix-cls}-title {
      color: @tree-node-checked-text-color;
    }

    .@{tree-node-prefix-cls}-icon {
      color: @tree-node-checked-text-color;
    }
  }

  &-draggabled {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  &-drag-line {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border-top: 1px solid #fc8555;
  }
  &-leaf-icon {
    height: @tree-node-icon-height;
    width: @tree-node-icon-width;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
